import * as YvanUI from 'yvan-ui-wotu'
import CustomData from "../widget/custom.data";

const _ = YvanUI.lodash
const React = YvanUI.React

interface Ref {

}

export default class Layout2 extends YvanUI.Scope<void, Ref> {

    main = this.$$({})

    vjson = {
        title: '布局5-上下表',
        bodyStyle: {
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            padding: 0,
        },
        items: [
            {
                view: 'spliter',
                split: 'horizontal',
                defaultSize: '50%',
                items: [
                    {
                        view: 'grid',
                        title: '表格1',
                        height: 'flex',
                        style: {
                            flexGrow: 1
                        },
                        idField: "customerid",
                        columns: [
                            {field: "customerid", hidden: true},
                            {field: "customercode", title: "客户编号", width: 80},
                            {field: "customername", title: "客户名称", width: 120},
                            {field: "logogram", title: "助记码", width: 80},
                            {field: "industryclass", title: "客户类型", width: 100},
                            {field: "customertype", title: "客户类别", width: 100},
                            {field: "zip", title: "邮编", width: 80},
                            {field: "contact", title: "联系人", width: 80},
                            {field: "telephone", title: "电话", width: 80},
                            {field: "province", title: "省", width: 80},
                            {field: "city", title: "市", width: 80},
                            {field: "address", title: "地址", width: 100},
                            {field: "ownername", title: "所属货主", width: 100},
                            {field: "isdefaultowner", title: "是否默认货主", width: 120},
                            {field: "routeid", hidden: true},
                            {field: "routename", title: "线路名称", width: 120},
                            {field: "isenable", title: "是否启用", width: 100},
                            {field: "remark", title: "备注", width: 100},
                        ],
                    },
                    {
                        view: 'grid',
                        title: '表格2',
                        height: 'flex',
                        style: {
                            flexGrow: 1
                        },
                        idField: "customerid",
                        columns: [
                            {field: "customerid", hidden: true},
                            {field: "customercode", title: "客户编号", width: 80},
                            {field: "customername", title: "客户名称", width: 120},
                            {field: "logogram", title: "助记码", width: 80},
                            {field: "industryclass", title: "客户类型", width: 100},
                            {field: "customertype", title: "客户类别", width: 100},
                            {field: "zip", title: "邮编", width: 80},
                            {field: "contact", title: "联系人", width: 80},
                            {field: "telephone", title: "电话", width: 80},
                            {field: "province", title: "省", width: 80},
                            {field: "city", title: "市", width: 80},
                            {field: "address", title: "地址", width: 100},
                            {field: "ownername", title: "所属货主", width: 100},
                            {field: "isdefaultowner", title: "是否默认货主", width: 120},
                            {field: "routeid", hidden: true},
                            {field: "routename", title: "线路名称", width: 120},
                            {field: "isenable", title: "是否启用", width: 100},
                            {field: "remark", title: "备注", width: 100},
                        ],
                        dataSource: {
                            func: () => {
                                return new Promise(resolve => {
                                    return resolve(CustomData)
                                })
                            }
                        },
                    }
                ]
            }
        ]
    }

}